<template>
  <el-dialog
    class="dialog-box"
    v-model="dialogVisible"
    :title="!dialogParam.title ? '自定义列表' : dialogParam.title"
    :destroy-on-close="true"
    width="800"
    @close="handleCancel"
  >
    <FixTable v-model="tableCol" />
    <template #footer>
      <span class="dialog-footer">
        <el-button
          @click="resetCol"
          v-if="
            props.dialogParam.initCol && props.dialogParam.initCol.length > 0
          "
          >重置</el-button
        >
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleAffirm"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DiaFixTable">
import { getCurrentInstance } from 'vue'
import { setTableConfig } from '@/api/system/user'

import useUserStore from '@/store/modules/user'
import { deepClone } from '@/utils/index'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

// 接受父级传递的参数
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dialogParam: {
    required: true,
    type: Object || Array,
    default: () => {
      return {
        open: false,
        title: '自定义列表',
        tableName: '',
        tableCol: [],
        initCol: [] //为了能够重置到系统一样的配置
      }
    }
  }
})

// 弹出框是否隐藏
const dialogVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 4
  },
  tableCol: []
})
let { queryParams, tableCol } = toRefs(data)

// 初始化
watch(
  () => props.modelValue,
  async () => {
    if (props.modelValue) {
      dialogVisible.value = props.modelValue // 表单弹出框
      tableCol.value = deepClone(props.dialogParam.tableCol) // 列表配置
    }
  },
  {
    // flush: 'post'
    immediate: true,
    deep: true
  }
)

// 重置列表配置
const resetCol = () => {
  // console.log('props.dialogParam.initCol=>', props.dialogParam.initCol)
  tableCol.value = deepClone([...props.dialogParam.initCol])
}

/* 获取列表 */
async function getList() {}

const emit = defineEmits(['ok', 'close', 'update:modelValue'])
// 确认操作
const handleAffirm = () => {
  if (props.dialogParam.tableName) {
    let data = {
      tableName: props.dialogParam.tableName,
      fields: JSON.stringify(tableCol.value)
    }
    setTableConfig(data).then(res => {
      userStore.getInfo()
    })
  }
  reset()
  emit('ok', tableCol.value)
}
const initTable = () => {
  let INITTABLE = deepClone([...props.dialogParam.initCol])
  // 初始化列表配置
  if (userStore.userInfo.listDisaplayObj?.continuingEducationTable) {
    let _tableCol = JSON.parse(
      userStore.userInfo.listDisaplayObj['continuingEducationTable']
    )
    // 过滤出本地新增的列
    let initItmes = INITTABLE.filter(
      item => !_tableCol.some(item1 => item1.prop == item.prop)
    )
    tableCol.value = []
    _tableCol.forEach(item => {
      let newItem = {}
      for (const e of INITTABLE) {
        if (e.prop == item.prop) {
          newItem = { ...e, ...item, label: e.label }
          tableCol.value.push(newItem)
          break
        }
      }
    })
    tableCol.value = [...tableCol.value, ...initItmes]
  }
}
// 取消操作
const handleCancel = () => {
  reset()
  emit('close', dialogVisible.value)
}
const reset = () => {
  dialogVisible.value = false
  emit('update:modelValue', dialogVisible.value)
}

function init() {
  getList()
}
init()
</script>
